<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

<!-- 弹幕 css引用-->


<link href="dmcss/scojs.css" rel="stylesheet">
<link href="dmcss/colpick.css" rel="stylesheet">
<link href="dmcss/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="dmcss/main.css">

<!-- 弹幕 -->

<style type="text/css">
.toolbar {
	border: 1px solid #ccc;
}

.text {
	/*         border: 1px solid #ccc; */
	width: 100%;
	height: 100px;
}

.userImage {
	border-radius: 50%;
	border-color: white;
	border: 1px;
	width: 45px;
	height: 45px;
	margin-top: 3px;
	opacity: 1;
}
.red {
    color:red;
}
</style>
<title>Single</title>
<!-- for-mobile-apps -->
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript">
	
	
	
	
	addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
	
	function hideURLbar(){ window.scrollTo(0,1); } 




</script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/medile.css" rel='stylesheet' type='text/css' />
<link href="css/single.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/contactstyle.css" type="text/css"
	media="all" />
<link rel="stylesheet" href="css/faqstyle.css" type="text/css"
	media="all" />
<!-- news-css -->
<link rel="stylesheet" href="news-css/news.css" type="text/css"
	media="all" />
<!-- //news-css -->
<!-- list-css -->
<link rel="stylesheet" href="list-css/list.css" type="text/css"
	media="all" />
<!-- //list-css -->
<!-- font-awesome icons -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- //font-awesome icons -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<!---<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>--->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
	$(document)
			.ready(
					function() {
					    $(document).on("click",".glyphicon-star",function(){
					    	$.ajax({
                                url : "${pageContent.request.contentPath}/Movies/MovieListServlet",
                                type : "post",
                                data : {
                                    op : "addCollect",
                                    movieId : getUrlParam("id"),
                                    userName : "${sessionScope.userName}"
                                },
                                dataType : "json",
                                contentType : "application/x-www-form-urlencoded",
                                success : function(result, status,xhr) {
                                    if ("addSuccess" == result) {
                                    	$(".glyphicon-star").addClass("red");
                                    } else if("deleteSuccess" == result){
                                    	$(".glyphicon-star").removeClass("red");
                                    }

                                },
                                error : function(xhr,status, error) {
                                    alert("加载失败");
                                }
                            });
					    	
					    })
						
						
						$(".scroll").click(function(event) {
							event.preventDefault();
							$('html,body').animate({
								scrollTop : $(this.hash).offset().top
							}, 1000);
						});

						//      @孙志强   异步请求添加评论
						$("#commentButton")
								.click(
										function() {
											$
													.ajax({
														url : "${pageContent.request.contentPath}/Movies/MovieListServlet",
														type : "post",
														data : {
															op : "addComment",
															movieId : getUrlParam("id"),
															commentContent : editor.txt
																	.html(),
															userName : "${sessionScope.userName}"
														},
														dataType : "json",
														contentType : "application/x-www-form-urlencoded",
														success : function(
																result, status,
																xhr) {
															if ("1" == result) {
																getCommentList();
															} else {
																alert("发布评论失败");
															}

														},
														error : function(xhr,
																status, error) {
															alert("加载失败");
														}
													});
										});

						// 		@孙志强   异步请求评论列表
						getCommentList();

						//      @孙志强   异步请求电影列表
						$
								.ajax({
									url : "${pageContent.request.contentPath}/Movies/MovieListServlet",
									type : "post",
									data : {
										op : "showMoviesList",
										movieId : getUrlParam("id")
									},
									dataType : "json",
									contentType : "application/x-www-form-urlencoded",
									success : function(result, status, xhr) {
										if (getUrlParam("id") != 0) {
											playMovie(result);
										}
										showMovies(result);
									},
									error : function(xhr, status, error) {
										alert("加载失败");
									}
								});

						// 	    @孙志强  显示电影列表
						function showMovies(result) {
							$
									.each(
											result.moviesInfoListRight,
											function(index, movie) {
												$(".single-grid-right")
														.append(
																"<div class=\"single-right-grids\">"
																		+ "<div class=\"col-md-4 single-right-grid-left\">"
																		+ "<a href=\"single.jsp?id="
																		+ movie.movieId
																		+ "\"><img src=\""+movie.moviePicture+"\" alt=\"\" /></a>"
																		+ "</div>"
																		+ "<div class=\"col-md-8 single-right-grid-right\">"
																		+ "<a href=\"single.jsp?id="
																		+ movie.movieId
																		+ "\" class=\"title\">"
																		+ movie.movieName
																		+ "</a>"
																		+ "<p class=\"author\">"
																		+ "<a href=\"#\" class=\"actors\">"
																		+ movie.movieActors
																		+ "</a>"
																		+ "</p>"
																		+ "<p class=\"views\">"
																		+ movie.movieCount
																		+ " views</p>"
																		+ "</div>"
																		+ "<div class=\"clearfix\"></div>"
																		+ "</div>")
											});
							$
									.each(
											result.moviesInfoListButtom,
											function(index, movie) {
												$("#owl-demo")
														.append(
																"<div class=\"item\">"
																		+ "<div class=\"w3l-movie-gride-agile w3l-movie-gride-agile1\">"
																		+ "<a href=\"single.jsp?id="
																		+ movie.movieId
																		+ "\" class=\"hvr-shutter-out-horizontal\">"
																		+ "<img src=\""+movie.moviePicture+"\" title=\"album-name\" class=\"img-responsive\" alt=\"\" />"
																		+ "<div class=\"w3l-action-icon\">"
																		+ "<i class=\"fa fa-play-circle\" aria-hidden=\"true\"></i>"
																		+ "</div>"
																		+ "</a>"
																		+ "<div class=\"mid-1 agileits_w3layouts_mid_1_home\">"
																		+ "<div class=\"w3l-movie-text\">"
																		+ "<h7>"
																		+ "<a href=\"single.jsp\">"
																		+ movie.movieName
																		+ "</a>"
																		+ "</h7>"
																		+ "</div>"
																		+ "<div class=\"mid-2 agile_mid_2_home\">"
																		+ "<p>"
																		+ movie.moviePublishDate
																		+ "</p>"
																		+ "</div>"
																		+ "<div class=\"clearfix\"></div>"

																		+ "</div>"
																		+ "<div class=\"ribben\">"
																		+ "<p>"
																		+ movie.movieRating
																		+ "</p>"
																		+ "</div>"
																		+ "</div>"
																		+ "</div>")
											});

							$("#owl-demo").owlCarousel({
								autoPlay : 3000, //Set AutoPlay to 3 seconds
								items : 5,
								itemsDesktop : [ 640, 5 ],
								itemsDesktopSmall : [ 414, 4 ]

							});

						}

						function getUrlParam(param) {
							var urlParam = window.location.search;
							if (urlParam.length > 0) {
								var urlParam_re = new RegExp("(?<=" + param
										+ "=)\\w*");
								var param = urlParam.match(urlParam_re);
								return param[0];
							} else {
								return 0;
							}

						}

						function playMovie(result) {
							$(".song-info").append(
									"<h3>" + result.moviesInfoPlay[0].movieName
											+ "</h3>");

							$(".panel-body").append(result.moviesInfoPlay[0].movieIntro);

							setdanmuinfo(result.moviesInfoPlay[0].movieLink);
						}

						function showComments(result) {
							$(".media-grids").empty();
							$
									.each(
											result,
											function(index, comment) {
												$(".media-grids")
														.prepend(
																"<div class=\"media\">"
																		+ "<h5>"
																		+ comment.userName
																		+ "</h5>"
																		+ "<div class=\"media-left\">"
																		+ "<a href=\"#\"> <img src=\"${pageContent.request.contentPath}/Movies/FileDownloadServlet?fileName="
																		+ comment.userPicture
																		+ "\" title=\"One movies\" class=\"userImage\" /></a>"
																		+ "</div>"
																		+ "<div class=\"media-body\">"
																		+ "<p>"
																		+ comment.commentContent
																		+ "</p>"
																		+ "<span>"
																		+ comment.commentDate
																		+ "</span>"
																		+ "</div>"
																		+ "</div>");
											});

							$(".media-grids").prepend(
									"<h3><small>共有</small>" + result.length
											+ "<small>条评论</small></h3>");
						}

						function getCommentList() {
							$
									.ajax({
										url : "${pageContent.request.contentPath}/Movies/MovieListServlet",
										type : "post",
										data : {
											op : "showCommentList",
											movieId : getUrlParam("id")
										},
										dataType : "json",
										contentType : "application/x-www-form-urlencoded",
										success : function(result, status, xhr) {
											if (getUrlParam("id") != 0) {
												showComments(result);
											}
										},
										error : function(xhr, status, error) {
											alert("加载失败");
										}
									});
						}

					});
</script>
<!-- start-smoth-scrolling -->
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css"
	media="all">
<script src="js/owl.carousel.js"></script>
<!-- <script src="js/simplePlayer.js"></script>
<script>
	$("document").ready(function() {
		$("#video").simplePlayer();
	});
</script> -->

</head>

<body>

	<!-- single -->
	<div class="single-page-agile-main">
		<div class="container">
			<!-- /w3l-medile-movies-grids -->
			<div class="agileits-single-top">
				<ol class="breadcrumb">
					<li><a href="index.html">Home</a></li>
					<li class="active">Single</li>
				</ol>
			</div>
			<div class="single-page-agile-info">
				<!-- /movie-browse-agile -->
				<div class="show-top-grids-w3lagile">
					<div class="col-sm-8 single-left">
						<div class="song-info">
							<!--  异步请求电影名字 -->
						</div>
						<div class="song" id="danmup">
							<!-- 弹幕的容器 -->

						</div>

						<!--异步请求电影链接 -->
						<div style="display: none">
							<span class="glyphicon" aria-hidden="true">&#xe072</span> <span
								class="glyphicon" aria-hidden="true">&#xe073</span> <span
								class="glyphicon" aria-hidden="true">&#xe242</span> <span
								class="glyphicon" aria-hidden="true">&#xe115</span> <span
								class="glyphicon" aria-hidden="true">&#xe111</span> <span
								class="glyphicon" aria-hidden="true">&#xe096</span> <span
								class="glyphicon" aria-hidden="true">&#xe097</span>
						</div>
						<div class="clearfix"></div>
						<div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">电影简介：</h3>
                            </div>
                            <div class="panel-body"></div>
                        </div>
						<div class="all-comments">
							<div class="all-comments-info">
								<a href="#">评论</a>

								<div class="agile-info-wthree-box">
									<form>
										<div id="editorBar" class="toolbar"></div>
										<div style="padding: 5px 0; color: #ccc"></div>
										<div>
											<h3>
												<small>说点什么吧...</small>
											</h3>
										</div>
										<div id="comment" class="text"></div>
										<div style="padding: 5px 0; color: #ccc"></div>
										<input id="commentButton" type="button" value="发送">
										<div class="clearfix"></div>
									</form>
								</div>
							</div>
							<div class="media-grids">
								<!--异步请求评论 -->
							</div>
						</div>
					</div>
					<div class="col-md-4 single-right">
						<h3>看看别人都看啥</h3>
						<div class="single-grid-right">
							<!-- 				循环输出电影列表                                                                -->
						</div>
					</div>



					<div class="clearfix"></div>
				</div>
				<!-- //movie-browse-agile -->
				<!--body wrapper start-->
				
				<div class="w3_agile_banner_bottom_grid">
				    <h3>看看高分电影吧</h3>
					<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px">
						<!--                循环添加电影列表						 -->
					</div>
				</div>
				<!--body wrapper end-->


			</div>
			<!-- //w3l-latest-movies-grids -->
		</div>
	</div>
	<!-- //w3l-medile-movies-grids -->


	<!-- Bootstrap Core JavaScript -->
	<script src="js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function() {
			$(".dropdown").hover(function() {
				$('.dropdown-menu', this).stop(true, true).slideDown("fast");
				$(this).toggleClass('open');
			}, function() {
				$('.dropdown-menu', this).stop(true, true).slideUp("fast");
				$(this).toggleClass('open');
			});

		});
	</script>
	<!-- //Bootstrap Core JavaScript -->
	<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			var defaults = {
				containerID : 'toTop', // fading element id
				containerHoverID : 'toTopHover', // fading element hover id
				scrollSpeed : 1200,
				easingType : 'linear'
			};

			$().UItoTop({
				easingType : 'easeOutQuart'
			});

		});
	</script>
	<!-- //here ends scrolling icon -->
	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#editorBar', '#comment')

		// 菜单配置
		editor.customConfig.menus = [ 'head', // 标题
		'bold', // 粗体
		'fontSize', // 字号
		'fontName', // 字体
		'italic', // 斜体
		'underline', // 下划线
		'strikeThrough', // 删除线
		'foreColor', // 文字颜色
		'backColor', // 背景颜色
		'justify', // 对齐方式
		'quote', // 引用
		'emoticon', // 表情
		'undo', // 撤销
		'redo' // 重复
		]

		// 创建富文本框
		editor.create()

		// 初始化 textarea 的值
		$('#comment').val(editor.txt.html())
	</script>


	<!-- 弹幕 -->
	<!-- <script src="dmjs/jquery-2.1.4.min.js"></script> -->
	<script src="dmjs/jquery.shCircleLoader.js"></script>
	<script src="dmjs/sco.tooltip.js"></script>
	<script src="dmjs/colpick.js"></script>
	<script src="dmjs/jquery.danmu.js"></script>
	<script src="dmjs/main.js"></script>
	<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
	<script>
		function setdanmuinfo(src) {

			$("#danmup").DanmuPlayer({
				src : src,
				height : "480px", //区域的高度
				width : "760px", //区域的宽度
				urlToGetDanmu : "query.php",
				urlToPostDanmu : "stone.php"
			});

		}

		$("#danmup .danmu-div").danmu("addDanmu", [ {
			"text" : "这是滚动弹幕",
			color : "white",
			size : 1,
			position : 0,
			time : 2
		}, {
			"text" : "我是帽子绿",
			color : "green",
			size : 1,
			position : 0,
			time : 3
		}, {
			"text" : "哈哈哈啊哈",
			color : "black",
			size : 1,
			position : 0,
			time : 10
		}, {
			"text" : "这是顶部弹幕",
			color : "yellow",
			size : 1,
			position : 1,
			time : 3
		}, {
			"text" : "这是底部弹幕",
			color : "red",
			size : 1,
			position : 2,
			time : 9
		}, {
			"text" : "大家好，我是伊藤橙",
			color : "orange",
			size : 1,
			position : 1,
			time : 3
		}

		])
	</script>
	<!-- 弹幕 -->

</body>
</html>